import { observer } from 'mobx-react'
import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Form, Input, Switch, Button, message, Select } from 'antd'

const { TextArea } = Input

const DepartmentManagementAdd: React.FC = () => {
    const navigate = useNavigate()
    const [form] = Form.useForm()
    const [loading, setLoading] = useState(false)

    const handleSubmit = async () => {
        try {
            const values = await form.validateFields()
            console.log('Success:', values);
          setLoading(true)
          // TODO: 调用添加接口
          message.success('添加成功')
          navigate('/setting/enterpriseManagement/departmentManagement')
        } catch (error) {
          message.error('添加失败')
        } finally {
          setLoading(false)
        }
    }
    return (
        <div className="add-app-detail">
            <div className="basic-info">
            <div className="title">基本信息</div>
                <Form
                    form={form}
                    labelCol={{ span: 4 }}
                    style={{ maxWidth: 600 }}
                >
                    <Form.Item
                        label="上级部门"
                        name="name"
                        rules={[{ required: true, message: '请选择上级部门' }]}
                    >
                        <Select placeholder="全部">
                            <Select.Option value="">全部</Select.Option>
                            <Select.Option value="全部">全部</Select.Option>
                            <Select.Option value="自定义">自定义</Select.Option>
                        </Select>
                    </Form.Item>

                    <Form.Item
                        label="部门名称"
                        name="code"
                        rules={[{ required: true, message: '请输入部门名称' }]}
                    >
                        <Input placeholder="请输入部门名称" />
                    </Form.Item>

                    <Form.Item
                        label="排序"
                        name="sort"
                        rules={[{ required: true, message: '请输入排序' }]}
                    >
                        <Input placeholder="请输入排序" />
                    </Form.Item>

                    <Form.Item
                        label="部门描述"
                        name="description"
                        rules={[
                            { max: 200, message: '请输入部门描述，最多不超过200字。' },
                        ]}
                    >
                        <TextArea rows={4} placeholder="请输入部门描述，最多不超过200字。" />
                    </Form.Item>
                </Form>
            </div>
            <div className="form-actions">
                <Button type="primary" htmlType="submit" loading={loading} onClick={handleSubmit}>
                保存
                </Button>
                <Button onClick={() => navigate(-1)}>返回</Button>
            </div>
        </div>
    )
}

export default observer(DepartmentManagementAdd)
